import React, { useState, useEffect } from 'react';
import "./my.scss";
import { getUser, putUser, putPwd } from '../../../api/api';
import CardMy from '../../../components/card_my';
import CardMyT from '../../../components/card_my_table1';

import { Card, message, Modal, Upload } from 'antd';
import ImgCrop from 'antd-img-crop';

const My = () => {
    const [userObj, setUserObj] = useState({});
    const [pwdObj, setPwdObj] = useState({});

    useEffect(() => {
        const getData = async () => {
            let { data } = await getUser();
            setUserObj(data.data);
            setFileList([{
                name: "image.png",
                uid: "-1",
                status: 'done',
                url: 'http://111.203.59.61:8060' + data.data.avatar,
            }])
        }
        getData();
    }, []);

    useEffect(() => {
        const putData = async () => {
            let { data } = await putUser(userObj);
            message.success(data.msg)
        }
        userObj.nickName && putData();
    }, [userObj]);

    useEffect(() => {
        const putData = async () => {
            let { data } = await putPwd(pwdObj);
            if (data.code !== 200) {
                message.error(data.msg);
            } else {
                message.success(data.msg);
                setPwdObj({});
            }
        }
        pwdObj.oldPassword && putData();
    }, [pwdObj]);

    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const [fileList, setFileList] = useState([]);


    const onChange = ({ fileList: newFileList }) => {
        setFileList(newFileList);
    };

    const onPreview = async file => {
        let src = file.url;
        if (!src) {
            src = await new Promise(resolve => {
                const reader = new FileReader();
                reader.readAsDataURL(file.originFileObj);
                reader.onload = () => resolve(reader.result);
            });
        }
        const image = new Image();
        image.src = src;
        const imgWindow = window.open(src);
        imgWindow.document.write(image.outerHTML);
    };

    return (
        <div id="my">
            <div className="content">
                <div className="my_card">
                    <CardMy showModal={showModal} userObj={userObj} />
                </div>
                <div className="my_table">
                    <Card title="基本资料">
                        <CardMyT setPwdObj={setPwdObj} setUserObj={setUserObj} userObj={userObj} pwdObj={pwdObj} />
                    </Card>
                </div>
            </div>
            <div className="mask">
                <Modal title="Basic Modal" width={800} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <div className="maskLeft">
                        <ImgCrop rotate>
                            <Upload
                                action="http://111.203.59.61:8060/dev-api/system/user/profile/avatar"
                                listType="picture-card"
                                fileList={fileList}
                                onChange={onChange}
                                onPreview={onPreview}
                                maxCount={1}
                            >
                                {fileList.length < 5 && '+ Upload'}
                            </Upload>
                        </ImgCrop>
                    </div>
                    <div className="maskRight"></div>
                </Modal>
            </div>
        </div>
    );
};

export default My;